<template>
    <div class="container">
        <div class="btns">
            <div class="btn" :class="{active:item.active}" v-for="item in warnTableList" :key="item.value" @click="warnBtns(item)">{{ item.label }}</div>
        </div>
        <div class="search">
            <el-form :model="searchForm" inline>
                <el-form-item label="统计方式">
                    <el-select v-model="searchForm.staticType" placeholder="请选择" size="small">
                        <el-option
                            v-for="item in ststisTableList"
                            :key="item.dictValue"
                            :label="item.dictLabel"
                            :value="item.dictValue"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="时间">
                    <el-date-picker
                        v-model="searchForm.date"
                        type="daterange"
                        value-format="YYYY-MM-DD"
                        range-separator="--"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                    />
                </el-form-item>
            </el-form>
            <div class="btn">
                <el-button type="primary" size="small" @click="search">查询</el-button>
            </div>
        </div>
        <div class="moudle_warp_divs_source" v-if="tabIndex === 1">
            <div class="item" v-for="item in quesTabData" :key="item.name">
                <div class="title">
                    <span class="arrow"><el-icon><CaretRight /></el-icon></span>
                    <span class="name">{{ item.name }}-{{ item.data }}</span>
                </div>
            </div>
        </div>
        <div class="chart" v-if="tabIndex === 1">
            <div style="height: 40%;">
                <Bar :chartData="chartData1" v-if="chartData1" />
            </div>
            <div style="height: 60%;">
                <Bar :chartData="chartData2" v-if="chartData2" />
            </div>
        </div>
        <div class="moudle_warp_divs_source" v-if="tabIndex === 2">
            <div class="item item-flex" style="width: calc(33% - 0.5rem)" v-for="item in quesTabData2" :key="item.name">
                <div class="title">
                    <span class="arrow"><el-icon><CaretRight /></el-icon></span>
                    <span class="name">{{ item.name }}-{{ item.data }}</span>
                </div>
            </div>
        </div>
        <div class="chart" v-if="tabIndex === 2">
            <Bar :chartData="chartData3" v-if="chartData3" />
        </div>
        <div class="warn-content" v-if="tabIndex === 3">
            <div class="chart" style="height: 50%;">
                <Bar :chartData="chartData4" v-if="chartData4" />
            </div>
            <div class="table" style="height: 50%;">
                <el-table :data="data" height="100%" empty-text="暂无数据" @row-click="tableDetail">
                    <el-table-column
                        v-for="(item, index) in tableHeaderList"
                        :key="index"
                        :prop="item.prop"
                        :label="item.label"
                        align="center"
                        show-overflow-tooltip
                    >
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <DialogView :visible="detailDialog" :title="currentData.a+'-河湖问题治理'" :footer="false" @update:visible="(v) => (detailDialog = v)">
            <div class="table-dialog">
                <div class="item" v-for="item in tableDialogList" :key="item">
                    <span>{{ item.label }}</span><span>{{ currentData[item.prop] }}</span>
                </div>
            </div>
        </DialogView>
    </div>
</template>
<script setup>
    import { ref, onMounted, nextTick } from "vue";
    import { CaretRight } from '@element-plus/icons-vue'
    import { quesOption, quesOption2, quesOption3, quesOption4 } from './echartsoptions'
    import { quesHeader, questable, quesTable, ststisTable, quesData, quesData2, quesDialogHeader } from './dataconfig'
    import Bar from '@/components/echarts/bar.vue'
    import DialogView from "@/components/DialogView.vue";
    const warnTableList = ref(quesTable)
    const ststisTableList = ref(ststisTable)
    const tabIndex = ref(1);
    const searchForm = ref({
        date: [],
        staticType: ''
    })
    const quesTabData = ref(quesData)
    const quesTabData2 = ref(quesData2)
    const data = ref(questable)
    const tableHeaderList = ref(quesHeader)
    const tableDialogList = ref(quesDialogHeader)
    const chartData1 = ref(null)
    const chartData2 = ref(null)
    const chartData3 = ref(null)
    const chartData4 = ref(null)
    const detailDialog = ref(false)
    const currentData = ref({})
    onMounted(() => {
        nextTick(() => {
            chartData1.value = quesOption
            chartData2.value = quesOption2
            chartData3.value = quesOption3
            chartData4.value = quesOption4
        })
    })
    const warnBtns = (item) => {
        warnTableList.value.forEach(t => {
            t.active = false
            if (t.value === item.value) {
                tabIndex.value = item.value
                t.active = true
            }
        })
    }
    const tableDetail = (row) => {
        console.log(row)
        detailDialog.value = true
        currentData.value = row
    }
</script>
<style scoped lang="less">
.container {
    height: 100%;
    width: 100%;
    color: #fff;
    .btns {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0.5rem 0;
        .btn {
            background: #0B2A4A;
            width: calc(30% - 0.5rem);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0.2rem 0;
            color: #fff;
            cursor: pointer;
            &.active {
                background: #636737;
            }
        }
    }
    .search {
        display: flex;
        align-items: center;
        margin-top: 0.5rem;
    }
    ::v-deep(.el-form) {
        .el-select {
            width: 4rem;
        }
        .el-select__wrapper {
            background-color: #133C57 !important;
            box-shadow: none;
        }
        .el-date-editor.el-input__wrapper {
            width: 7rem;
            padding: 0;
        }
        .el-date-editor .el-range__icon {
            display: none;
        }
        .el-date-editor .el-range-separator {
            padding: 0;
        }
        .el-form-item {
            margin-right: 1rem;
            margin-bottom: 0;
        }
        .el-input__wrapper {
            background-color: #133C57 !important;
            box-shadow: none;
        }
        .el-input__inner {
            font-size: 10px;
            color: #a8abb2;
        }
        .el-select__input,
        .el-select__placeholder,
        .el-select__prefix, .el-select__suffix,.el-select__caret,
        .el-date-editor .el-range-input,.el-date-editor .el-range-separator,
        .el-date-editor .el-range__close-icon,
        .el-form-item__label {
            color: #fff;
        }
    }
    .moudle_warp_divs_source {
        display: flex;
        justify-content: center;
        color: #fff;
        margin-top: 0.5rem;
        .item {
            width: calc(50% - 2rem);
            height: 100%;
            margin-right: 1rem;
            font-size: 0.7rem;
            &.item-flex {
                display: flex;
                justify-content: space-between;
                margin-right: 0.5rem;
            }
            &:last-child {
                margin: 0;
            }
            .title {
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 0.2rem 0;
                .arrow {
                    display: flex;
                    align-items: center;
                }
            }
            &:nth-of-type(1) {
                background: #44727C;
                .title {
                    color: #90B2F4;
                }
            }
            &:nth-of-type(2) {
                background: #90833B;
                .title {
                    color: #FFF2C3;
                }
            }
            &:nth-of-type(3) {
                background: #2A4A79;
                .title {
                    color: #EAF1FF;
                }
            }
        }
    }
    .chart {
        height: calc(100% - 6rem);
    }
    .warn-content {
        height: calc(100% - 5rem);
        width:100%;
        color: #fff;
    }
}
.table-dialog {
    .item {
        display: flex;
        margin-bottom: 0.6rem;
        span {
            &:first-child {
                width: 4rem;
            }
            &:last-child {
                width: calc(100% - 4rem);
            }
        }
    }
}
</style>
<style lang="less">
.el-table {
    background-color: transparent;
    th.el-table__cell,
    tr {
        background-color: transparent;
        color: #fff;
    }
    
}
.el-table th.el-table__cell {
    background-color: #062C46;
}
.el-table td.el-table__cell {
    cursor: pointer;
}
.el-table--fit .el-table__inner-wrapper:before,
.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
    background-color: transparent;
}
.el-table,
.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
    border: none;
}
// 设置行的背景颜色
.el-table tr:nth-child(even) {
//   background: #002128 !important;
  border: none !important;
}
.el-table tr:nth-child(odd) {
  background: #002128 !important;
}
</style>